<template>
	<view>
		<u-navbar title="聊天" :is-back="false" title-color="#F09238">
			<view class="slot-wrap" v-if="flag">
				<u-icon name="moments" color="#F09238" size="40" @click="nav('/pages/chat/pyq','1')"></u-icon>
			</view>
		</u-navbar>
		<view class="content" v-if="conversationList.length>0" v-for="(item,index) in conversationList"
			@click="navTo(item)">
			<view class="item">
				<view class="i_l">
					<view class="yuan" v-if="item.unreadCount>0">{{item.unreadCount}}</view>
					<image :src="item.userProfile.avatar || 'http://cloud.bxwhl.com/assets/common/img/header.png'"
						mode="aspectFill" class="u_img"></image>
				</view>
				<view class="i_r">
					<view class="i_r_t">
						<view class="name">{{item.userProfile.nick | name}}</view>
						<view class="time">{{$u.timeFormat(item.lastMessage.lastTime, 'yyyy-mm-dd hh:MM:ss')}}</view>
					</view>
					<view class="con">{{item.lastMessage.messageForShow}}</view>
				</view>
			</view>
		</view>
		<view v-if="conversationList.length==0" class="noimg">
			<image src="../../static/noimg/nonews.png"></image>
		</view>
	</view>
</template>
<script>
	import {
		genTestUserSig
	} from '../../static/utils/GenerateTestUserSig'
	export default {
		components: {},
		data() {
			return {
				flag: false,
				conversationList: [],
				num:0
			};
		},
		filters: {
			name(val) {
				if (val == '') {
					return "昵称未设置"
				} else {
					return val
				}
			}
		},
		// 
		onLoad() {

		},
		watch: {
			conversationList: {
				handler(nld, old) {
					this.num=0
					this.conversationList.forEach(item=>{
						this.num+=item.unreadCount
					})
					console.log(this.num)
					if(this.num>0){
						uni.setTabBarBadge({
						  index: 1,
						  text:this.num.toString()
						})
					}else{
						uni.removeTabBarBadge({
							index:1
						})
					}
				},
				deep: true // 可以深度检测到 obj 对象的属性值的变化
			}
		},
		onShow() {
			if (uni.getStorageSync('userInfo')) {
				this.flag = true
				this.getList()
				this.listUpDated()
				// this.groupListUpDated()
			} else {
				this.conversationList = []
			}
		},
		//下拉刷新
		onPullDownRefresh() {},
		methods: {
			// 统一跳转
			nav(url, type) {
				// type=0不要登录 1 需要登录
				if (type == 0) {
					uni.navigateTo({
						url: url
					})
				} else {
					if (this.Md.islogin()) {
						uni.navigateTo({
							url: url
						})
					}
				}
			},
			// 拉取会话列表
			getList() {
				let promise = this.tim.getConversationList();
				promise.then((imResponse) => {
					this.conversationList = imResponse.data.conversationList; // 会话列表，用该列表覆盖原有的会话列表
					console.log('会话列表', this.conversationList)
				}).catch(function(imError) {
					console.warn('getConversationList error:', imError); // 获取会话列表失败的相关信息
				});
			},
			// 收到会话列表更新通知
			listUpDated() {
				this.tim.on(this.TIM.EVENT.CONVERSATION_LIST_UPDATED, (event) => {
					console.log('收到会话列表更新通知', event)
					this.conversationList = event.data
				});
			},
			// 收到群组列表更新通知
			groupListUpDated() {
				this.tim.on(this.TIM.EVENT.GROUP_LIST_UPDATED, (event) => {
					console.log('收到群组列表更新通知', event)
				});
			},
			navTo(item) {
				let name = item.userProfile.nick
				if (name == '') {
					name = "昵称未设置"
				}
				uni.navigateTo({
					url: "/pages/chat/chatdetails?id=" + item.userProfile.userID + "&name=" + name
				})
			}
		}
	}
</script>
<style scoped>
	.yuan {
		width: 30rpx;
		height: 30rpx;
		background-color: #DD001B;
		position: absolute;
		top: 30rpx;
		left: -20rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		text-align: center;
		line-height: 30rpx;
		z-index: 10;
		border-radius: 20rpx;
	}

	.noimg {
		width: 750rpx;
		height: 80vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.noimg>image {
		width: 320rpx;
		height: 400rpx;
	}

	.con {
		font-size: 24rpx;
		line-height: 30rpx;
		color: #666666;
		opacity: 1;
		margin-top: 16rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap
	}

	.time {
		font-size: 22rpx;
		font-weight: 300;
		color: #666666;
		opacity: 1;
	}

	.name {
		height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 45rpx;
		color: #333333;
		opacity: 1;
	}

	.i_r_t {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 560rpx;
		height: 60rpx;
	}

	.i_r {
		width: 560rpx;
		height: 160rpx;
		padding: 30rpx 0 0;
		border-bottom: 1px solid #DCDCDC;
	}

	.item {
		width: 690rpx;
		height: 160rpx;
		display: flex;
		align-items: center;
	}

	.i_l {
		width: 130rpx;
		height: 160rpx;
		display: flex;
		align-items: center;
		position: relative;
		/* justify-content: center; */
	}

	.u_img {
		width: 88rpx;
		height: 88rpx;
		border-radius: 88rpx;
	}

	.content {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.slot-wrap {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex: 1;
		box-sizing: border-box;
		padding-right: 30rpx;
	}
</style>
